import { useState } from "react";

import { Button, Image, Popover, List, Avatar } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { history } from "umi";

import { fetchList, add, update, remove } from "@/api/order";
import moment from "moment";
import useAreaOrder from "@/hooks/useAreaOrder";

export default () => {
  const [areaName, setAreaName] = useState("");

  const columns = [
    {
      title: "拼单地址",
      dataIndex: "keyWord",
      hideInTable: true,
    },
    {
      title: "订单时间",
      dataIndex: "createTime",
      search: false,
    },
    {
      title: "订餐时间段",
      search: false,
      render: (_, record) => {
        return (
          <>
            <span>{record.bookBreakfast === 1 ? "早饭" : ""} </span>
            <span>{record.bookLunch === 1 ? "午饭" : ""} </span>
            <span>{record.bookDinner === 1 ? "下午饭" : ""} </span>
          </>
        );
      },
    },
    {
      title: "拼单地址",
      dataIndex: "address",
      search: false,
      render: (_, record) => {
        return `${record.areaName}${record.streetName}${record.address}`;
      },
    },
    {
      title: "菜品",
      dataIndex: "dishName",
      search: false,
      render: (_, record) => {
        return (
          <div style={{ display: "flex" }}>
            {record.dishOrderDishList?.map((item) => {
              return (
                <div style={{ display: "flex", margin: 10 }}>
                  <Image width={80} height={80} src={item.dishImg} />
                  <div style={{ marginLeft: 5 }}>
                    <div>{item.dishName}</div>
                  </div>
                </div>
              );
            })}
          </div>
        );
      },
    },
    {
      title: "总份数",
      dataIndex: "count",
      search: false,
    },
    {
      title: "团长",
      dataIndex: "headGroupList",
      search: false,
      render: (_, record) => {
        return (
          <Popover
            content={
              <List
                itemLayout="horizontal"
                dataSource={record?.headGroupList || []}
                renderItem={(item, index) => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<Avatar src={item.avatar} />}
                      title={item.nickName}
                      description={item.mobile}
                    />
                  </List.Item>
                )}
              />
            }
            title="团长列表"
            trigger="click"
          >
            <a>{record.headGroupList?.length || 0}名 (点击查看)</a>
          </Popover>
        );
      },
    },
  ];

  return (
    <PageContainer>
      {useCommonTable({
        renderCustomContent: (actionRef) => {
          return useAreaOrder(
            {
              bookBreakfast: 1,
              startCreateTime: moment()
                .startOf("day")
                .format("YYYY-MM-DD HH:mm:ss"),
              endCreateTime: moment()
                .endOf("day")
                .format("YYYY-MM-DD HH:mm:ss"),
            },
            (item) => {
              setAreaName(item.areaName);
              actionRef?.current?.reload();
            }
          );
        },

        title: "订单",
        renderAdd: () => {},
        columns,
        modalWidth: 800,
        params: {
          areaName,
          bookBreakfast: 1,
          startCreateTime: moment()
            .startOf("day")
            .format("YYYY-MM-DD HH:mm:ss"),
          endCreateTime: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
        },
        fetchList,
        add,
        update,
        remove,
        actionColumnWidth: 100,
        showCheckbox: false,
        renderAction: (_, record) => {
          return (
            <Button
              type="primary"
              onClick={() => {
                history.push(`/order/index/detail?id=${record.id}`);
              }}
            >
              拼团详情
            </Button>
          );
        },
      })}
    </PageContainer>
  );
};
